<template>
  <el-input @click.native="UnproductiveList"
            v-if="disabled||(category.valT&&!category.options.length)"
            type="text"
            size="small"
            readonly
            v-model="category.valT"></el-input>
  <el-cascader
    ref="category"
    size="small"
    class="elCascaderStyle"
    v-else
    @click.native="UnproductiveList"
    :options="category.options"
    :clearable="clearable"
    v-model="category.val"
    @change="getCategory"
    :props="category.props"
    clearable>
  </el-cascader>

</template>

<script>
  import {getUnproductiveList } from '../api/api'
export default {
  name: 'category',
  data(){
    return {
      category:{
        val:this.val,
        valT:this.valT,
        options: [],
        props: {
          value: 'id',
          label: 'text',
          children: 'children'
        }
      },
    }
  },
  props:{
    clearable:{
      type: Boolean,
      default: false
    },
    disabled:{
      type:Boolean,
      default:false
    },
    size:{
      type: String,
      default: ''
    },
    position:{
      type: Boolean,
      default: true
    },
    val:{
      type: Array,
      default: function () {
        return []
      }
    },
    valT:{
      type: String,
      default: ''
    }
  },
  watch: {
    val(val) {
      this.category.val =val;
    },
    valT(val) {
      this.category.valT =val;
    },
  },
  mounted() {
  },
  methods: {
    UnproductiveList(){
      if(this.category.options.length){
          return
      }
      getUnproductiveList().then(res => {
        if(!this.disabled&&!this.category.options.length){
          this.category.options = res.obj;
          this.$nextTick(()=>{
            console.log(this.$refs.category)
            this.$refs.category.menuVisible=true
          })
        }

      });
    },
    getCategory(val){
      this.$emit("changes",val);
    },
  }
}
</script>

<style lang="scss">
  .pos-ab{position: absolute;}
  .box-tree{position: absolute;width:100%;height:auto;z-index:99;}
  .elCascaderStyle{.el-cascader__label{line-height: 36px;}}
</style>
